<template>
  <div class="area-select">
    <div :class="['area-item', id != '' && 'edit-area']" v-for="(item, index) in areaMap" :key="index">
      <el-select :disabled="id != ''" v-model="item.val" filterable :placeholder="item.placeholder" @change="areaChange($event, item, index)">
        <el-option
          v-for="(i, idx) in item.child"
          :key="idx"
          :label="i.name"
          :value="i.id">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import {getAreaList} from "@/api/common/index";
export default {
  name: "area-select",
  inheritAttrs: true,
  data(){
    return {
      current: {},
      areaMap: [ //street
        {label: "省", placeholder: '请选择', level: '1', name: 'province', val: '', child: []},
        {label: "市", placeholder: '请选择', level: '2', name: 'city', val: '', child: []},
        {label: "区", placeholder: '请选择', level: '3', name: 'area', val: '', child: []}
      ],
      id: this.$attrs['area-prop']['row']['landId'] || ''
    }
  },
  mounted(){
    let _self = this
    _self.$nextTick(() => {
      _self.getAreaList()
    })
  },
  methods: {
    getAreaList(){
      let _self = this, params = {}, idx = -1, {row} = this.$attrs['area-prop']
      if(row.landId && row.areaVO){
        for(let key in row.areaVO){
          let idx = _self.areaMap.findIndex(i => i.name == key)
          if(idx != -1){
            _self.areaMap[idx]['placeholder'] = row.areaVO[key]
          }
        }
        return
      }
      if(!_self.current.name){
        params['level'] = 1
        idx = 0
      }else if(_self.current.name == 'province') {
        params['level'] = 2
        idx = 1
        _self.areaMap.forEach(area => {
          if(area.name != 'province'){
            area.val = ''
            area.child = []
          }else{
            params['keywords'] = area.val
          }
        })
      }else if(_self.current.name == 'city'){
        params['level'] = 3
        idx = 2
        _self.areaMap.forEach(area => {
          if(area.name == 'city'){
            params['keywords'] = area.val
          }
          if(area.name == 'area'){
            area.val = ''
          }
        })
      }
      return getAreaList(params).then((res) => {
        _self.$set(_self.areaMap[idx], 'child', res.data)
      });
    },
    areaChange(e, item, index){
      let _self = this
      item.child.forEach(i => i.id == item.val && (item.areaName = i.name))
      let actions = () => {
        let arr = []
        let idx = 
        _self.areaMap.forEach(area => {
          if(area.val != ''){
            arr.push({
              name: area.name,
              code: area.val,
              areaName: area.areaName
            })
          }
        })
        _self.$emit('area-change', arr, _self.$attrs['area-prop']['keyName'])
      }
      if(index + 1 == _self.areaMap.length) return actions()
      _self.current = item
      _self.getAreaList().then(
        res => {
          actions()
        }
      )
    }
  },
};
</script>
<style lang="scss" scoped>
.area-select{
  display: flex;
  align-items: center;
  .area-item{
    &+.area-item{
      margin-left: 15px;
    }
  }
}
.edit-area ::v-deep{
  .el-input__inner::placeholder{
    color: #333
  }
}
</style>